<template>
  <div class="fish-list-container">
    <div class="fish-list-header">
      <h1 class="fish-list-title">观赏鱼展示</h1>
      <p class="fish-list-subtitle">探索各种美丽的观赏鱼品种</p>
    </div>

    <FishGrid />
  </div>
</template>

<script setup lang="ts">
  import FishGrid from '@/components/FishGrid/index.vue';
</script>

<style lang="less" scoped>
  .fish-list {
    &-container {
      padding: 40px 0;
      max-width: 1200px;
      margin: 0 auto;
    }

    &-header {
      text-align: center;
      margin-bottom: 40px;
    }

    &-title {
      font-size: 36px;
      font-weight: 700;
      color: #403a7a;
      margin: 0 0 15px;
    }

    &-subtitle {
      font-size: 18px;
      color: #666;
      margin: 0;
    }
  }
</style>
